<template>
    <div class="bTicket_container" id="precticeInfo" v-if="loading" v-cloak>
        <div class="top-logo">
          <img src="../assets/img/logo.png" alt="">
        </div>
        <div class="bTicket_boxes">
            <div v-for="(prectice,i) in precticeList" :key="i" v-bind:class="{thisBtn:precticeIdList.filter(x => x === prectice.ID).length > 0}" class="bTicket_boxes_row">
                <div class="sUp_boxes_split"></div>
                <div class="bTicket_boxes_row_top" v-on:click="choosePrectice(prectice.ID)">
                    <h3 class="bTicket_boxes_row_headline">{{prectice.Name}}</h3>
                    <p class="bTicket_boxes_row_subTheme text2_ellipsis" style="visibility:hidden;height:8.2vw;">{{prectice.Content}}</p>
                    <span class="bTicket_icon_triangle"></span>
                </div>
                <div class="bTicket_boxes_row_btm">
                    <p class="bTicket_boxes_row_info">
                        <span class="bTicket_time_icon"></span>
                        <span class="text_ellipsis">{{prectice.Time}}</span>
                    </p>
                    <p class="bTicket_boxes_row_info">
                        <span class="bTicket_site_icon"></span>
                        <span class="text_ellipsis">{{prectice.Place}}</span>
                    </p>
                </div>
                <div class="bTicket_boxes_row_menu" v-if="precticeIdList.filter(x => x === prectice.ID).length > 0">
                    <div v-bind:class="{thisTicket:subPrecticeIdList.filter(x => x.sid === subPrectice.ID && x.pid === prectice.ID).length > 0,disabled:subPrectice.isConflict&&subPrecticeIdList.filter(x => x.sid === subPrectice.ID && x.pid === prectice.ID).length > 0}"
                         class="bTicket_boxes_row_ticket" v-for="(subPrectice,j) in prectice.SubPrectices" :key="j" v-on:click="chooseSubPrectice(prectice.ID,subPrectice.ID)">
                        <h4 class="bTicket_boxes_row_ticket_subtitle">{{subPrectice.Name}}</h4>
                        <p class="bTicket_boxes_row_ticket_tips text_ellipsis">
                            <span class="bTicket_boxes_row_ticket_price blue">{{subPrectice.StartTime}}至{{subPrectice.EndTime}}</span>
                            <!-- <span class="bTicket_refund_icon">不可退</span> -->
                        </p>
                        <div class="bTicket_boxes_row_ticket_count" v-if="1===2">
                            <span class="bTicket_boxes_row_ticket_column" v-on:click="ticketNum(prectice.ID,subPrectice.ID,-1)">-</span>
                            <span class="bTicket_boxes_row_ticket_column">{{subPrectice.Num}}</span>
                            <span class="bTicket_boxes_row_ticket_column" v-on:click="ticketNum(prectice.ID,subPrectice.ID,1)">+</span>
                        </div>
                        <p class="bTicket_boxes_row_ticket_audit text_ellipsis">
                            <span class="bTicket_shen_icon"></span>
                            <span class="bTicket_boxes_row_ticket_context">此门票需要组委会审核</span>
                        </p>
                        <div class="bTicket_boxes_row_ticket_main">
                            <span class="bTicket_tips_icon"></span>
                            <div class="bTicket_boxes_row_ticket_context" v-html='subPrectice.Content'>
                            </div>
                        </div>
                        <p class="bTicket_boxes_tips" v-if="subPrectice.isConflict && subPrecticeIdList.filter(x => x.sid === subPrectice.ID && x.pid === prectice.ID).length > 0">× 选择的票种时间冲突</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bTicket_container_tabBar">
            <div class="bTicket_container_tabBar_lf">
                <span v-show="1===2">合计：</span>
                <span class="bTicket_container_tabBar_total blue" v-show="1===2">¥ {{price}}</span>
            </div>
            <div class="bTicket_container_tabBar_rg">
                <a class="bTicket_container_tabBar_button" href="javascript:void(0)" v-on:click="toAttend()">确定</a>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'exhibitionList',
  data () {
    return {
      credit: null,
      loading: false,
      precticeList: null,
      precticeIdList: [],
      subPrecticeIdList: [],
      price: 0
    }
  },
  created () {
    var that = this
    if (this.$route.query.st) {
      axios({
        url: that.baseUrl + '/api/exhibition/getCredit/' + that.$route.query.st,
        method: 'GET'
      })
        .then(res => {
          console.log(res)
          that.credit = res.data
        })
        .catch(err => {
          console.log(err)
        })
      axios({
        url:
          that.baseUrl +
          '/api/exhibition/getPrecticeList/' +
          that.$route.query.st,
        method: 'GET'
      })
        .then(res => {
          console.log(res)
          res.data.forEach((prectice, index) => {
            if (prectice.SubPrectices) {
              prectice.SubPrectices.forEach((subPrectices, count) => {
                subPrectices.Num = 1
                subPrectices.isConflict = false
                subPrectices.StartTime = subPrectices.StartTime.replace(
                  'T',
                  ' '
                ).substring(0, 16)
                subPrectices.EndTime = subPrectices.EndTime.replace(
                  'T',
                  ' '
                ).substring(0, 16)
              })
            }
          })
          that.loading = true
          that.precticeList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  methods: {
    toAttend () {
      var that = this
      if (that.subPrecticeIdList.length > 0) {
        var subId = []
        var num = 0
        that.subPrecticeIdList.forEach((element, index) => {
          subId.push(element.sid)
          var sub = that.precticeList
            .filter(x => x.ID === element.pid)[0]
            .SubPrectices.filter(f => f.ID === element.sid)[0]
          num += sub.Num
        })
        window.location.href =
          '#/sign?st=' +
          that.$route.query.st +
          '&subPrecticeId=' +
          subId.join('|') +
          '&num=' +
          num
      }
    },
    choosePrectice (precticeId) {
      var that = this
      var hasItem = that.precticeIdList.filter(x => x === precticeId)
      if (hasItem && hasItem.length > 0) {
        that.precticeIdList = that.precticeIdList.filter(x => x !== hasItem[0])
      } else {
        that.precticeIdList.push(precticeId)
      }
    },
    chooseSubPrectice (precticeId, subPrecticeId) {
      var that = this
      var hasItem = that.subPrecticeIdList.filter(
        x => x.pid === precticeId && x.sid === subPrecticeId
      )
      if (hasItem && hasItem.length > 0) {
        var sub = that.precticeList
          .filter(x => x.ID === hasItem[0].pid)[0]
          .SubPrectices.filter(f => f.ID === hasItem[0].sid)[0]
        sub.isConflict = false
        that.subPrecticeIdList = that.subPrecticeIdList.filter(
          x => x !== hasItem[0]
        )
      } else {
        that.subPrecticeIdList.push({ pid: precticeId, sid: subPrecticeId })
      }
      that.compareDate()
      that.getAmount()
    },
    compareDate () {
      var that = this
      var tempList = []
      that.subPrecticeIdList.forEach((element, index) => {
        var sub = that.precticeList
          .filter(x => x.ID === element.pid)[0]
          .SubPrectices.filter(f => f.ID === element.sid)[0]
        tempList.push(sub)
      })

      if (tempList && tempList.length > 1) {
        for (var i = 0; i < tempList.length; i++) {
          for (var j = i + 1; j < tempList.length; j++) {
            console.log(i)
            console.log(j)
            console.log(tempList[j])
            if (tempList[j]) {
              var startTime1 = new Date(tempList[i].StartTime)
              var endTime1 = new Date(tempList[i].EndTime)
              var startTime2 = new Date(tempList[j].StartTime)
              var endTime2 = new Date(tempList[j].EndTime)

              if (endTime1 >= startTime2 && startTime1 <= startTime2) {
                tempList[i].isConflict = true
                tempList[j].isConflict = true
              }

              if (endTime1 >= endTime2 && startTime1 <= endTime2) {
                tempList[i].isConflict = true
                tempList[j].isConflict = true
              }
            }
          }
        }
      }
    },
    getAmount () {
      var that = this
      that.price = 0
      if (that.subPrecticeIdList && that.subPrecticeIdList.length > 0) {
        that.subPrecticeIdList.forEach((subprectice, index) => {
          var sub = that.precticeList
            .filter(x => x.ID === subprectice.pid)[0]
            .SubPrectices.filter(f => f.ID === subprectice.sid)[0]
          that.price += Number(sub.Fee) * sub.Num
        })
      }
    },
    ticketNum (precticeId, subPrecticeId, num) {
      var that = this
      var sub = that.precticeList
        .filter(x => x.ID === precticeId)[0]
        .SubPrectices.filter(f => f.ID === subPrecticeId)[0]

      if (sub.Num + num > 0) {
        sub.Num = sub.Num + num
        that.getAmount()
      }
    }
  }
}
</script>

<style>
@import "../../static/css/buyTicket.css";
[v-cloak] {
  display: none;
}
.top-logo{
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.4vw 0;
  background-color: #f7f7f7;
}
.top-logo>img{
  width: 25.6vw;
  height: 18.8vw;
}
</style>
